<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高仿米柚社区导航条2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-family: 微软雅黑;
        }
        #wrap{
            width: 100%;
            height: 50px;/*这是用直尺工具测量出来的*/
            background: #FF6700;
        }
        #nav{
            width: 960px;
            height: 50px;
            /*background: blue; 一开始先写一个块元素给设定颜色 这样好对其中的元素进行设计 然后在去掉 这样子就是跟背景颜色一样了*/
            /*设置元素居中*/
           margin: 0 auto; /*0为上下 auto为左右*/
            margin-top: 150px;/* margin 和margin-top顺序不能变*/
        }
        #nav ul{
            list-style: none;
        }
        a{
            text-decoration: none;

        }
        #nav>ul>li{
            float: left;
            height: 50px;/*当容器的行高与高度一致时 容器内的文字恰好垂直居中*/
            line-height: 50px;
        }
        #nav>ul>li>a{
            color: white;
            font-size: 14px;
            padding: 0 16px;
            display: block;/*设置a链接以块状的形式存在，默认继承父元素的宽度和高度*/
        }
        #nav>ul>li:hover>a{
            background: #F56600;
        }
        #nav>ul>.active>a{
            background: #F56600;/*默认的颜色 即鼠标不放上去也是默认的这个颜色*/
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="nav" >
            <ul>
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">新帖</a></li>
                <li><a href="#">MIUI专区</a></li>
                <li><a href="#">资源分享</a></li>
                <li><a href="#">谈天说地</a></li>
                <li><a href="#">俱乐部</a></li>
                <li><a href="#">板块</a></li>
                <li><a href="#">极客秀</a></li>
                <li><a href="#">MIUI下载</a></li>
                <li><a href="#">橙色星期五</a></li>
                <li><a href="#">论坛APP</a></li>
            </ul>
        </div>
    </div>
</body>
</html>